<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
    <title>CaMS OFS</title>
                        
    <!-- Logic JS -->
    <script src="/static/shared/js/jquery.js"></script>
    <script src="/interface/int.js"></script>
    <script src="/static/ofs/js/ofs.js"></script>
    <script src="/static/ofs/js/classes.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- Bootstrap core CSS -->
    <link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <!-- Custom styles for this template -->
    <link href="/static/bootstrap/css/signin.css" rel="stylesheet">
    <link href="/static/bootstrap/css/simple-sidebar.css" rel="stylesheet">   

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
     <script src="../../assets/js/html5shiv.js"></script>
     <script src="../../assets/js/respond.min.js"></script>
     <![endif]-->
    <link type="text/css" rel="stylesheet" href="/static/bootstrap/css/style.css"><script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script>

    <link type="text/css" rel="stylesheet" href="/static/ofs/css/ofsstyle.css">
    <link type="text/css" rel="stylesheet" href="/static/ofs/css/ofs_blacker.css">
</head>
    
    <body screen_capture_injected="true">
        <div id="page_login">
            <div class="OFSlogin">
                <div class="container">
                    <form class="form-signin"  method="post">
                        <h4 align="center"> CaMS OFS </h4>
                        <h2 class="form-signin-heading">Please sign in to OFS</h2>
                        <input type="text" class="form-control" placeholder="Username" autofocus="" id="username">
                        <input type="password" class="form-control" placeholder="Password" id="password"> 
                        <button class="btn btn-lg btn-info btn-block" type="button" id="login_button">Sign in</button>
                    </form>
                </div>
            </div>
        </div> <!-- /container -->
        
        
        <!-- Bootstrap core JavaScript
         ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        
        
        
        <!-- end of login page-->
        
        <div id="page_main" style="display:none">
            
      
   
 
        
        
        <!-- /.side bar -->
        
        <div id="sidebar-wrapper">
            
            <ul class = "sidebar-nav">
                <li class="MenuGroup" id="GroupCus"><a class="MenuParent sideParent mgrOnly" tab="tab_cus" group="GroupCus">Customers</a></li>
                <li class="MenuGroup" id="GroupCus"><a class="MenuChild sideChild" tab="tab_cus_info" group="GroupCus">Customer Info</a></li>
                <li class="MenuGroup" id="GroupCus"><a class="MenuChild mgrOnly sideChild" tab="tab_cus_register" group="GroupCus">Mass Registration</a></li>
                <li class="MenuGroup" id="GroupCus"><a class="MenuChild mgrOnly sideChild" tab="tab_cus_deactivate" group="GroupCus">Mass Deactivation</a></li>
            
               <li class="MenuGroup" id="GroupCan"> <a class="MenuParent mgrOnly sideParent" tab="tab_stallcanteen" group="GroupCan">Canteens and Stalls</a></li>
                <!--
                <div class="MenuChild" tab="tab_can_info" group="GroupCan">Canteens and Stalls</div>
                <div class="MenuChild" tab="tab_can_register" group="GroupCan">Register Canteen</div>
                -->
                <li><a class="MenuParent mgrOnly sideParent" tab="tab_price">Price</a></li>
                <li><a class="MenuParent mgrOnly sideParent" tab="tab_reports">Reports</a></li>
                <li><a class="MenuParent mgrOnly sideParent" tab="tab_data">Data Management</a></li>
            </ul>
      </div>
  
        
        <div id="maincontent" class = "ContentPage">
            <div id="tab_main" class="tab">
                    <div class="Home">
                        Welcome to CaMS OFS Portal at Beitu University!
                    </div>
            </div>

            <div id="tab_cus" class="tab mgrOnly" style="display:none">
                <h3>Customers</h3>
    
                
                
                
                
                
                <button type="button" id="cusUpdate" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-refresh"></span> Refresh
                </button>
                
                <button type="button" id="cusSelAll" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-list-alt"></span> Select all
                </button>
                
                
                <button type="button" id="cusSelClear" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-repeat"></span> Unselect all
                </button>
                
                
                <button type="button" id="cusSelDeact" class="btn btn-warning btn-sm">
                    <span class="glyphicon glyphicon-trash"></span> Deactivate selected
                </button>

                <div class="PageSelection">
                    Page <span type=number class="cusPageNum">1</span> / <span class="cusPageCount">1</span>

                    <button type="button" class="cusPagePrev" class="btn btn-warning btn-sm">
                        <span class="glyphicon glyphicon-arrow-left"></span> Previous Page
                    </button>

                    <button type="button" class="cusPageNext" class="btn btn-warning btn-sm">
                        <span class="glyphicon glyphicon-arrow-right"></span> Next Page
                    </button>
                </div>
                
                
                
                
                
                <div class="panel panel-default" >
            <!-- Default panel contents -->
                    <div class="panel-heading">Number of selected customers: <span id="cusSelCount">0</span></div>
                         
  <!-- Table -->
                    <table class="table " id="">
                        <thead>
                            <tr>
                                <th class="CustomerDIVBarcode" >Barcode</th>
                                <th class="CustomerDIVUserType">User type</th>
                                <th class="CustomerDIVUsername">Username</th>
                                <th class="CustomerDIVBalance">Balance</th>
                                <th class="CustomerDIVActivated">Activated</th>
                            </tr>
                        </thead>
                        <tbody id="CustomerDIVContainer">
                        </tbody>
                    </table>
                    <div id="cusLoading" style="display:none">
                        Loading the current page...
                    </div>
                </div>
            </div>
            
            
            
            
            

            <div id="tab_cus_info" class="tab" style="display:none">
                <h3>Customer Information</h3>

                <table>
                <tr>
                    <td class="DataLabel"><input type=radio name="searchby" value="username" id="r1">Search Username</td>
                    <td><input type="text" class="form-control"id="cusInfoSearchUsername" /></td>
                </tr>
                <tr>
                    <td><input type=radio  name="searchby" value="barcode" id="r2">Search Barcode</td>
                    <td><input type="text" class="form-control" id="cusInfoSearchBarcode" /></td>
                </tr>
                </table>
                
                <button type="button" id="cusInfoButFind" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-search"></span>Search
                </button>
                
                
                
                
                <comment user info editing region below />
                <br/>
                
                
                
                
                <div id="cusInfoDisp" class="panel panel-default">

                    <div class="panel-heading" id="cusInfoUsername"></div>
                    <div class="panel-body"> 
                    <label>Barcode:</label> <label2 id="cusInfoBarcode"></label2><br>
                    <label>Customer Type:</label><label2 id="cusInfoUserType"></label2><br>
                    <label>Balance:</label><label2 id="cusInfoBalance"></label2><br>
                    <label>Activated:</label><label2 id="cusInfoActivated"></label2><br>
                    </div>
                    
                    <button type="button" id="cusInfoButActivate" class="btn btn-info btn-sm mgrOnly">
                        <span class="glyphicon glyphicon-ok-sign"></span> Toggle Activation
                    </button>
                    <button type="button" id="cusInfoButChangePassword" class="btn btn-info btn-sm mgrOnly">
                        <span class="glyphicon glyphicon-refresh"></span> Reset Password
                    </button>
                    <button type="button" id="cusInfoButTopup" class="btn btn-info btn-sm">
                        <span class="glyphicon glyphicon-credit-card"></span> Top up
                    </button>
                    <button type="button" id="cusInfoButRefund" class="btn btn-info btn-sm">
                        <span class="glyphicon glyphicon-credit-card"></span> Refund
                    </button>
                </div>
                </div>
        
            
            
            <div id="tab_cus_register" class="tab" style="display:none">
                <h3>Customer Mass Registration</h3>
                <label>Customer Type:</label>
                    <input type=radio name="cusRegUserType" value="S" checked=true>Student
                    <input type=radio name="cusRegUserType" value="A">Staff
                    <input type=radio name="cusRegUserType" value="V">Visitor
                <br />
                
                <textarea id="cusRegList" class="form-control " rows="16" ng-model="result" placeholder="Format: Username,Barcode"></textarea>
                
                <br />
                 <button type="button" id="cusRegButCreate" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-plus-sign"></span>Confirm 
                </button>

            </div>
            
            
            
            <div id="tab_cus_deactivate" class="tab" style="display:none">
                 <h3>Customer Mass Deactivation</h3>
                
                <br />
                <textarea id="cusDeList" class="form-control " rows="16" ng-model="result" placeholder="Format: Username"></textarea>
                <br />
                <button type="button" id="cusDeButDeactivate" class="btn btn-warning btn-sm">
                    <span class="glyphicon glyphicon-trash"></span> Mass Deactivate
                </button>
            </div>

         
 
            
            <div id="tab_stallcanteen" class="tab" style="display:none">
                <h3>Canteens and Stalls</h3>
                
                <button type="button" id="canRegister" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-plus-sign"></span> Register New Canteen
                </button>
                
                <button type="button" id="canUpdate" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-refresh"></span> Refresh
                </button>
                
                
       
                <div id="CanteenDIVContainer">
                </div>

            </div>
            
            
            <div id="tab_can_info" class="tab" style="display:none">
                Canteen Info
            </div>
            <div id="tab_can_register" class="tab" style="display:none">
                register canteen
            </div>
            <div id="tab_reports" class="tab" style="display:none">
                <h3>Reporting</h3>
                <br />
                <div id="repContainer">
                    <!-- monthly table first -->
                    <div class=panel>
                        <h3 class="panel-heading">Monthly Report</h3>
                        <table class="table" id="repTableMonthly">
                            <thead>
                            <tr id="HeadRowMonthly">
                                <th class="First PColumn"></th>
                                <th class="P1 PColumn"></th>
                                <th class="P2 PColumn"></th>
                                <th class="P3 PColumn"></th>
                                <th class="P4 PColumn"></th>
                                <th class="P5 PColumn"></th>
                                <th class="P6 PColumn"></th>
                                <th class="P7 PColumn"></th>
                                <th class="P8 PColumn"></th>
                                <th class="P9 PColumn"></th>
                                <th class="P10 PColumn"></th>
                                <th class="P11 PColumn"></th>
                                <th class="P12 PColumn"></th>
                                <th class="Last PColumn"></th>
                            </tr>
                            </thead>
                            <tbody id="repBodyMonthly">
                            </tbody>
                        </table>
                    </div>

                    <!-- daily table -->
                    <div class=panel>
                        <h3 class="panel-heading">Daily Report</h3>
                        <table class="table" id="repTableDaily">
                            <thead>
                            <tr id="HeadRowDaily">
                                <th class="First PColumn"></th>
                                <th class="P1 PColumn"></th>
                                <th class="P2 PColumn"></th>
                                <th class="P3 PColumn"></th>
                                <th class="P4 PColumn"></th>
                                <th class="P5 PColumn"></th>
                                <th class="P6 PColumn"></th>
                                <th class="P7 PColumn"></th>
                                <th class="P8 PColumn"></th>
                                <th class="P9 PColumn"></th>
                                <th class="P10 PColumn"></th>
                                <th class="Last PColumn"></th>
                            </tr>
                            </thead>
                            <tbody id="repBodyDaily">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="repStatusMsg">
                    No report has been generated.
                </div>
                <button type="button" id="repButGen" class="btn btn-info btn-sm ">
                    <span class="glyphicon glyphicon-edit"></span> Generate Report
                </button>
            </div>
        </div>
            
        <nav class="navbar navbar-inverse navbar-fixed-top collapse navbar-collapse navbar-ex1-collapse" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" id="MenuMain" tab="tab_main" href="#">CaMS OFS</a>
                </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
     
                <div class="collapse navbar-collapse navbar-ex1-collapse" id="siderbar">
                    <ul class="nav navbar-nav">
                        <!--<li class="dropdown" >
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Customers <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class="MenuGroup" id="GroupCus"><a class="MenuParent" tab="tab_cus" group="GroupCus">Customer List</a></li>
                                <li class="MenuGroup" id="GroupCus"><a class="MenuChild" tab="tab_cus_info" group="GroupCus">Customer Info</a></li>
                                <li class="MenuGroup" id="GroupCus"><a class="MenuChild mgrOnly" tab="tab_cus_register" group="GroupCus">Mass Registration</a></li>
                                <li class="MenuGroup" id="GroupCus"><a class="MenuChild mgrOnly" tab="tab_cus_deactivate" group="GroupCus">Mass Deactivation</a></li>
                            </ul>
                        </li> 
                        <li class="MenuGroup" id="GroupCan"><a class="MenuParent mgrOnly" tab="tab_stallcanteen" group="GroupCan">Canteens and Stalls</a></li>
                        <li><a class="MenuParent mgrOnly" tab="tab_price">Price</a></li>
                        <li> <a class="MenuParent mgrOnly" tab="tab_reports">Reports</a></li>
                        <li> <a class="MenuParent mgrOnly" tab="tab_data">Data Management</a></li>-->
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <p class="navbar-text" name="userAdmin" id="userAdmin">Welcome <span id="userName"></span> </p>
                        <p class="navbar-text" > <a id='ButLogout' href='#'onclick="doLogout()">Logout</a></p>

                    </ul>
                </div><!-- /.navbar-collapse -->
            </nav>
    </div>
        
<div id="blacker" style="display:none">
</div>

<div style="display:none">
<table>
<tr class="CustomerDIV CusEntry" id="cusTMPL" >
    <td class="CustomerDIVBarcode" href="#"></td>
    <td class="CustomerDIVUserType"></td>
    <td class="CustomerDIVUsername"></td>
    <td class="CustomerDIVBalance"></td>
    <td class="CustomerDIVActivated"></td>
</tr>
</table>

<div class="CanteenDIV" id="canTMPL" >
    <div class ="list-group">
        <h4 class="CanteenDIVHeader list-group-item title"></h4>
        
    
        <div class="list-group-item">
            <p class="CanteenDIVDesc list-group-item"></p>
            <table class="CanteenDIVStalls table" >
                <tr class="CanteenStallDIV" >
                    <th class="CanteenStallName">Name</th>
                    <th class="CanteenStallCategory">Category</th>
                    <th class="CanteenStallDesc">Description</th>
                </tr>
            </table>
            <button type="button" class="btn btn-info btn-sm cdButEdit">
                <span class="glyphicon glyphicon-edit"></span> Edit Canteen Information
            </button>
            
            <button type="button" class="btn btn-warning btn-sm cdButDeact">
                <span class="glyphicon glyphicon-minus-sign"></span> Deactivate Canteen
            </button>
            
            <button type="button"  class="btn btn-info btn-sm cdButAddst">
                <span class="glyphicon glyphicon-plus-sign"></span> Register New Stall
            </button>
        </div>    
    </div>
    
    
 
    
</div>

<table>
    <tr class="CanteenStallDIV" id="canStallTMPL" >
        <td class="CanteenStallName" href="#"></td>
        <td class="CanteenStallCategory"></td>
        <td class="CanteenStallDesc"></td>
    </tr>
</table>

<div class="StallInfoDIV panel panel-default" id="stallInfoTMPL" >

        <div class ="panel-heading">
        <!--    <span class="sidLabel">Name:</span>-->
            <span class="sidFill sidNameFill"></span>
        </div>
        <div class = "panel-body">
            <span class="sidLabel">Description:</span>
            <span class="sidFill sidDescFill"></span>
            <br />
            <span class="sidLabel">Category:</span>
            <span class="sidFill sidCateFill"></span>
            <br />
            <span class="sidLabel">Username Prefix:</span>
            <span class="sidFill sidPrefFill"></span>
            <br />
       
    
    <comment now list the menu ></comment>
            
            Menu: 
            <div class="sidMenuContainer">
                <span class="StallMenuName">Name</span>
                <span class="StallMenuDesc">Description</span>
                <span class="StallMenuPrice">Price</span>
                <div class="menuLoading">Menu Loading ...</div>
            </div>
        </div>

    <div class = "sidInfoBtnGroup">
    
    
        
        <button type="button"  class="btn btn-info btn-sm sidButResetPwd">
            <span class="glyphicon glyphicon-refresh"></span> Reset Password
        </button>
        
        <button type="button"  class="btn btn-warning btn-sm sidButDereg">
            <span class="glyphicon glyphicon-remove"></span> Deactivate Stall
        </button>
        
        <button type="button"  class="btn btn-info btn-sm sidButClose">
            <span class="glyphicon glyphicon-ok"></span> Done
        </button>
    </div>
    
    
 </div>   
    
    
    
    <!--
    <input type=button value="Close" class="sidButClose"/>
    <input type=button value="Reset Manager Password" class="sidButResetPwd"/>
    <input type=button value="Deregister Stall" class="sidButDereg"/>
-->
         


<div class="StallMenuDIV" id="stallMenuTMPL" >
    <span class="StallMenuName"></span>
    <span class="StallMenuDesc"></span>
    <span class="StallMenuPrice"></span>
</div>

<div class="NewStallDIV controls form-inline panel panel-default" id="newStallTMPL" >
    <div class="panel-heading">Register New Stall</div>
    <div class="panel-body">
        <span class="nsdLabel">Name:</span>
        <input class="nsdInput nsdInputName form-small NewStallForm" />
        <br />
        <br />
        <span class="nsdLabel">Category:</span>
        <input class="nsdInput nsdInputCate form-small NewStallForm" />
        <br />
        <br />
        <span class="nsdLabel">Username prefix:</span>
        <input class="nsdInput nsdInputPref form-small NewStallForm" />
        <br />
        <br />
        
        <span class="nsdLabel">Description:</span> 
        
        <textarea id="cusRegList" class="form-control nsdInputDesc" rows="2" ng-model="result" placeholder="Description"></textarea>
        <br />
        
        <div style="float:right">
                
                <button type="button"  class="btn btn-info btn-sm nsdButReg">
                    <span class="glyphicon glyphicon-ok"></span> Register
                </button>        
                
                
                <button type="button"  class="btn btn-warning btn-sm nsdButClose">
                    <span class="glyphicon glyphicon-remove"></span> Cancel
                </button>
        
        </div>
        
    </div>
</div>

<div class="TopupDIV controls form-inline panel panel-default" id="topupTMPL" >
    <div class="panel-heading">Top Up</div>
        <div class = "panel-body">
            <span class="topLabel">Customer Barcode:</span>
            <span class="topFill topBarcodeFill "></span>
            <br/>
            <br/>
            <span class="topLabel">Topup amount:</span>
            <input class="topInput topInputAmt form-small" />
            <br />
            <br />
            <div style="float:right;">
                <button type="button"  class="btn btn-info btn-sm topButTopup">
                    <span class="glyphicon glyphicon-ok"></span> Topup
                </button>  
                <button type="button"  class="btn btn-warning btn-sm topButClose">
                    <span class="glyphicon glyphicon-remove"></span> Cancel
                </button>  
            </div>
        </div>
</div>

<div class="NewCanteenDIV controls form-inline panel panel-default" id="newCanteenTMPL" >
    <div class="panel-heading NewCanDIVHeader">Register New Canteen</div>
    <div class="panel-body">
        <span class="nsdLabel">Name:</span>
        <input class="nsdInput ncdInputName form-small NewCanteenForm" />
        <br />
        <br />
        <span class="nsdLabel">Description:</span>
        <input class="nsdInput ncdInputDesc form-small NewCanteenForm" />
        <br />
        <br />
            <div style="float:right">
                
                <button type="button"  class="btn btn-info btn-sm ncdButReg">
                    <span class="glyphicon glyphicon-ok"></span> Register
                </button>        
                
                
                <button type="button"  class="btn btn-warning btn-sm ncdButClose">
                    <span class="glyphicon glyphicon-remove"></span> Cancel
                </button>
            </div>
    </div>
</div>

<table>
    <tr class="EntryMonthly" id="repMEntryTMPL" >
        <td class="First PColumn"></td>
        <td class="P1 PColumn"></td>
        <td class="P2 PColumn"></td>
        <td class="P3 PColumn"></td>
        <td class="P4 PColumn"></td>
        <td class="P5 PColumn"></td>
        <td class="P6 PColumn"></td>
        <td class="P7 PColumn"></td>
        <td class="P8 PColumn"></td>
        <td class="P9 PColumn"></td>
        <td class="P10 PColumn"></td>
        <td class="P11 PColumn"></td>
        <td class="P12 PColumn"></td>
        <td class="Last PColumn"></td>
    </tr>
    <tr class="EntryDaily" id="repDEntryTMPL" >
        <td class="First PColumn"></td>
        <td class="P1 PColumn"></td>
        <td class="P2 PColumn"></td>
        <td class="P3 PColumn"></td>
        <td class="P4 PColumn"></td>
        <td class="P5 PColumn"></td>
        <td class="P6 PColumn"></td>
        <td class="P7 PColumn"></td>
        <td class="P8 PColumn"></td>
        <td class="P9 PColumn"></td>
        <td class="P10 PColumn"></td>
        <td class="Last PColumn"></td>
    </tr>
    <tr class="ReportCanDetails" id="repCanDetails" >
        <td colspan="99">
            <div class="DetailContent panel ReportCanContent">
                <div class="ReportCanEmptyMsg">
                    This canteen has no stalls.
                </div>
                <div class="ReportStallContainer" style="display:none">
                    <div class="panel-heading">Details for <span class="ReportCanteenName"></span></div>
                    <table class="reportSubTable">
                        <thead class="RCH">
                        </thead>
                        <tbody class="RCB">
                        </tbody>
                    </table>
                </div>
            </div>
        </td>
    </tr>
</table>



<div class="BlackerWaitDIV" id="blackerWaitTMPL" >
</div>

</div>


        
    </body>
</html>
